<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>天启-Login</title>
    <script th:src="@{~/js/jquery.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <link th:href="@{~/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{~/css/modules/sys/login.css}" rel="stylesheet"/>

</head>
<body style="background-color:rgb(20,136,198)">
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <div id="login">
                <login-component></login-component>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
<script>
    // 注册
    Vue.component('login-component', {
        template: '<div><div :style="{height:\'275px\'}">' +
            '</div><div><h1>天启系统</h1></div>' +
            '<div  v-if="error" class="alert alert-danger alert-dismissible">' +
            '<h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>' +
            '</div>' +
            '<div>' +
            '<input class="cInput" type="text" :style="{backgroundColor:\'rgb(20,136,198)\'}" placeholder="LoginID"  v-model="username">' +
            '</div>' +
            '<div>' +
            '<input class="cInput" type="password" :style="{backgroundColor:\'rgb(20,136,198)\'}" placeholder="Password"   v-model="password" @keyup.enter="dologin">' +
            '</div>' +
            '<div>' +
            '<br><Button :style="{color:\'rgb(20,136,198)\',backgroundColor:\'white\',width:\'100px\'}"  @click=dologin>登陆</Button>' +
            '</div>' +
            '</div>',
            data(){
            return{
                username: '',
                password: '',
                captcha: '',
                error: false,
                errorMsg: '33',
                src: 'captcha.jpg'
            }
        },
        beforeCreate: function(){
            if(self != top){
                top.location.href = self.location.href;
            }
        },
        methods: {
            dologin: function (event) {
                var data = "username="+this.username+"&password="+this.password;
                var vm=this;
                $.ajax({
                    type: "POST",
                    url: "sys/login",
                    data: data,
                    dataType: "json",
                    success: function(result){
                        if(result.code == 200){//登录成功
                            parent.location.href ='index.html';
                        }else{
                            vm.error = true;
                            vm.errorMsg=result.message;
                        }
                    }
                });
            },
            enterToLogin(ev){
                ev.keyCode===13&&this.login()
            }
        }
    })
    // 创建根实例
    var vm =  new Vue({
        el: '#login'
        })


</script>


</body>
</html>